<template>
  <div class="box box-ver w-p100 h-p100">
    <div class="box box-ver w-p100 h-p100">
      <div class="box-f1 of-y-s">
        <div class="tag">基本信息</div>
        <div class="line box box-ac">
          <div class="box-f1 left tx-l">单据编码</div>
          <div>GX44141412313</div>
        </div>
        <div class="line box box-ac">
          <div class="box-f1 left tx-l">项目公司</div>
          <div>武汉有范网络</div>
        </div>
        <div class="line box box-ac">
          <div class="box-f1 left tx-l">金额</div>
          <div>88.88</div>
        </div>
        <div class="line box box-ac">
          <div class="box-f1 left tx-l">报销人</div>
          <div>梅小西</div>
        </div>
        <div class="img-container">
          <div ref="galleryContainer">
            <img class="gallery" v-gallery:group :src="item.img" v-for="(item, index) in imgList" :value="item" :key="index"  alt="">
          </div>
          <div @click="seeImg(index)" :src="item.img" :style="{'background-image': 'url('+item.img+')'}" v-for="(item, index) in imgList" :value="item" :key="index" class="img-item">
            <div @click.stop="deleteItem(index)" class="icon icon-delete"></div>
          </div>
          <div @click="selectPhoto()" class="img-item icon add">
          </div>
        </div>
      </div>
      <div class="bottom">上传</div>
    </div>
    <image-cropper
      ref="imageCropper"
      :cropperConfig="cropperConfig"
      :callback="loadImage"></image-cropper>
  </div>
</template>

<script>
import imageCropper from '@/components/imageCropper'
export default {
  name: 'index',
  components: {
    imageCropper
  },
  data () {
    return {
      cropperConfig: {
        width: 16,
        height: 9,
        quality: 0.7,
        maxWidth: 2000
      },
      imgList: []
    }
  },
  mounted () {
    console.log('index')
  },
  methods: {
    seeImg (index) {
      let $gallery = this.$refs.galleryContainer.getElementsByClassName('gallery')[index]
      console.log($gallery)
      $gallery.click()
    },
    selectPhoto () {
      this.$refs.imageCropper.checkPhoto()
    },
    loadImage (data) {
      this.imgList.push({
        img: data
      })
    },
    deleteItem (index) {
      this.imgList.splice(index, 1)
    }
  }
}
</script>

<style lang="scss">
.tag{
  padding:.1rem .3rem;
  color:#999;
  font-size:.26rem;
  background-color:#EEE;
}
.line{
  color:#000;
  font-size:.3rem;
  padding:.3rem;
  border-bottom:1px solid #DDD;
  .left{
    color:#999;
  }
}
.img-container{
  width:100%;
  .img-item{
    position:relative;
    width:2.2rem;
    height:2.2rem;
    border:1px solid #DDD;
    float:left;
    margin-top:.2rem;
    margin-left:.2rem;
    background-size:auto 100%;
    background-position:center;
    img{
      width:100%;
      height:100%;
      opacity:0;
      position:relative;
      display: block;
    }
    &.add{
      background-image:url('../assets/images/icon-add.png');
    }
    .icon-delete{
      width:.33rem;
      height:.33rem;
      position:absolute;
      right:.1rem;
      top:.1rem;
      background-image:url('../assets/images/icon-delete.png');
    }
  }
}
.gallery{
  width:0;
  height:0;
  opacity:0;
}
.bottom{
  height:1rem;
  background-color:#55abff;
  color:#FFF;
  width:100%;
  line-height:1rem;
  text-align:center;
  font-size:.36rem;
}
</style>
